<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./assets/lib/layui/css/layui.css">
    <link rel="stylesheet" href="./assets/css/login.css">
    <link rel="stylesheet" href="./assets/css/style.css">

</head>

<body>
    <canvas id="c"></canvas>
    <img src="./assets/images/logo.png" id="logo" alt="">
    <!-- 登录盒子 开始-->
    <div class="box login">
        <div class="title">登录</div>
        <!-- 登录表单 开始 -->
        <form class="layui-form" action="">

            <!-- 用户名 -->
            <div class="layui-form-item">
                <i class="layui-icon layui-icon-user"></i>
                <input type="text" name="username" required lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
            </div>
            <!-- 密码 -->
            <div class="layui-form-item">
                <i class="layui-icon layui-icon-password"></i>
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
            <!-- 登录按钮 -->
            <div class="layui-form-item">
                <button class="layui-btn layui-btn layui-btn-fluid" lay-submit lay-filter="formDemo">登录</button>
            </div>
            <!-- 注册超链接 -->

            <div class="layui-form-item">
                <a href="javascript:">注册新用户</a>
            </div>

        </form>
        <!-- 登录表单 结束 -->
    </div>
    <!-- 登录盒子 结束-->

    <!-- 注册盒子 开始-->
    <div class="box zhuce">
        <div class="title">注册</div>
        <!-- 登录表单 开始 -->
        <form class="layui-form" action="">

            <!-- 用户名 -->
            <div class="layui-form-item">
                <i class="layui-icon layui-icon-user"></i>
                <input type="text" name="username" required lay-verify="required|user" placeholder="请输入账号" autocomplete="off" class="layui-input">
            </div>
            <!-- 密码 -->
            <div class="layui-form-item">
                <i class="layui-icon layui-icon-password"></i>
                <input type="password" name="password" required lay-verify="required|pwdlen" placeholder="请输入密码" autocomplete="off" class="layui-input password">
            </div>
            <!-- 确认密码 -->
            <div class="layui-form-item">
                <i class="layui-icon layui-icon-password"></i>
                <input type="password" required lay-verify="required|same" placeholder="请确认密码" autocomplete="off" class="layui-input">
            </div>
            <!-- 登录按钮 -->
            <div class="layui-form-item">
                <button class="layui-btn layui-btn layui-btn-fluid" lay-submit lay-filter="formDemo">立即注册</button>
            </div>
            <!-- 登录超链接 -->
            <div class="layui-form-item">
                <a href="javascript:">登录</a>
            </div>
        </form>
        <!-- 登录表单 结束 -->
    </div>
    <!-- 注册盒子 结束-->

    <script src="assets/lib/jquery.js"></script>
    <script src="assets/lib/layui/layui.all.js"></script>
    <script src="assets/js/base.js"></script>
    <script src="assets/js/login.js"></script>


    <script>
        var root = {
            wavecolor: {
                r: 125,
                g: 52,
                b: 253
            },
            rainbowSpeed: 0.5,
            rainbow: true,
            matrixspeed: 50
        };

        var c = document.getElementById("c");
        var ctx = c.getContext("2d");

        var hueFw = false;
        var hue = -0.01;

        // making the canvas full screen
        c.height = window.innerHeight;
        c.width = window.innerWidth;

        // the characters
        // アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレワヰヱヲンヺ・ーヽヿ
        var konkani = "゠0123456789"
            // converting the string into an array of single characters
        var characters = konkani.split("");
        var font_size = 14;
        var columns = c.width / font_size; // number of columns for the rain
        var gradient = ctx.createLinearGradient(0, 10, 0, 200);
        // an array of drops - one per column
        var drops = [];
        // x below is the x coordinate
        // 1 = y-coordinate of the drop (same for every drop initially)
        for (var x = 0; x < columns; x++)
            drops[x] = 1;

        // drawing the characters
        function draw() {
            // Get the BG color based on the current time i.e. rgb(hh, mm, ss)
            // translucent BG to show trail

            ctx.fillStyle = "rgba(0,0,0, 0.05)";
            ctx.fillRect(0, 0, c.width, c.height);

            ctx.fillStyle = "#BBB"; // grey text
            ctx.font = font_size + "px arial";

            // looping over drops
            for (var i = 0; i < drops.length; i++) {
                // background color
                ctx.fillStyle = "rgba(10,10,10, 1)";
                ctx.fillRect(i * font_size, drops[i] * font_size, font_size, font_size);
                // a random chinese character to print
                var text = characters[Math.floor(Math.random() * characters.length)];
                // x = i * font_size, y = value of drops[i] * font_size

                if (root.rainbow) {
                    hue += (hueFw) ? 0.01 : -0.01;
                    var rr = Math.floor(127 * Math.sin(root.rainbowSpeed * hue + 0) + 128);
                    var rg = Math.floor(127 * Math.sin(root.rainbowSpeed * hue + 2) + 128);
                    var rb = Math.floor(127 * Math.sin(root.rainbowSpeed * hue + 4) + 128);
                    ctx.fillStyle = 'rgba(' + rr + ',' + rg + ',' + rb + ')';
                } else {
                    ctx.fillStyle = 'rgba(' + root.wavecolor.r + ',' + root.wavecolor.g + ',' + root.wavecolor.b + ')';
                }

                ctx.fillText(text, i * font_size, drops[i] * font_size);
                // Incrementing Y coordinate
                drops[i]++;
                // sending the drop back to the top randomly after it has crossed the screen
                // adding randomness to the reset to make the drops scattered on the Y axis
                if (drops[i] * font_size > c.height && Math.random() > 0.975)
                    drops[i] = 0;
            }
        }

        window.onresize = () => {
            location.reload();
        }

        setInterval(draw, root.matrixspeed);

        function livelyPropertyListener(name, val) {
            switch (name) {
                case "matrixColor":
                    root.wavecolor = hexToRgb(val);
                    break;
                case "rainBow":
                    root.rainbow = val;
                    break;
                case "rainbowSpeed":
                    root.rainbowSpeed = val / 100;
                    break;
            }
        }

        function hexToRgb(hex) {
            var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
            return result ? {
                r: parseInt(result[1], 16),
                g: parseInt(result[2], 16),
                b: parseInt(result[3], 16)
            } : null;
        }
    </script>
</body>

</html>